<template>
    <sky-base-page ref="skyBasePageRef" :api-obj="qly.api.order.info"
                   :params="params" type="data" btnPadding="0" refresherEnabled
                   bg-page-color="#f5f5f5" @success="getOrderInfo">
        <template #default="{dataInfo}">
            <!--            状态卡片-->
            <status-card :orderInfo="dataInfo"/>
            
            <!-- 商品卡片-->
            <goods-card :orderInfo="dataInfo"/>
            
            <!-- 地址卡片-->
            <addressCard v-if="dataInfo.delivery_method===DeliveryMethodEnum.express.value"
                         :address="dataInfo.address"/>
            
            <!-- 自提点信息-->
            <pickupCard v-if="dataInfo.delivery_method===DeliveryMethodEnum.pickup.value" :pickup="dataInfo.pickup"/>
            
            <!-- 订单信息-->
            <orderInfoCard :orderInfo="dataInfo"/>
        
        </template>
        <template #footer>
            <view class="btn-box">
                <view v-if="orderInfo?.status==OrderStatusEnum.pendingPayment.value">
                    <up-button type="primary" text="取消订单" @tap="cancelOrderHandler(orderInfo)"></up-button>
                </view>
                <view v-if="orderInfo?.status==OrderStatusEnum.pendingPayment.value">
                    <up-button type="primary" text="立即支付" @tap="orderPayHandler(orderInfo)"></up-button>
                </view>
                <view v-if="orderInfo?.deliveryFlag">
                    <up-button type="primary" text="确认发货" @tap="confirmDeliveryHandler(orderInfo)"></up-button>
                </view>
                <view v-if="orderInfo?.receivingFlag">
                    <up-button type="primary" text="确认收货" @tap="confirmReceivingHandler(orderInfo)"></up-button>
                </view>
                <view v-if="orderInfo?.commentFlag">
                    <up-button type="primary" text="去评论" @tap="toCommentHandler(orderInfo)"></up-button>
                </view>
                <view v-if="orderInfo?.refundFlag">
                    <up-button type="primary" text="申请售后" @tap="toRefund(orderInfo)"></up-button>
                </view>
            </view>
        </template>
    </sky-base-page>
    
    <!--    商家确认发货-->
    <confirmDeliveryPopup ref="confirmDeliveryPopupRef" @success="getOrderInfo"/>
</template>
<script setup>
import statusCard from './components/statusCard.vue'
import goodsCard from './components/goodsCard.vue'
import addressCard from './components/addressCard.vue'
import pickupCard from './components/pickupCard.vue'
import orderInfoCard from './components/orderInfoCard.vue'
import {DeliveryMethodEnum, OrderStatusEnum} from '@/enums/order'
import confirmDeliveryPopup from './components/confirmDeliveryPopup.vue'
import {cancelOrder, orderPay, confirmReceiving} from './data'

const confirmDeliveryPopupRef = ref()
const skyBasePageRef = ref()

const params = ref({})
const orderInfo = ref({})
const getOrderInfo = (data) => {
    orderInfo.value = data
    console.log('data', data)
}

// 刷新订单详情
const orderInfoRefresh = () => {
    uni.$emit('refreshOrder')
    skyBasePageRef.value.refresh()
}

// 取消订单
const cancelOrderHandler = (item) => {
    cancelOrder(item.id, () => {
        orderInfoRefresh()
    })
}

// 订单支付
const orderPayHandler = (item) => {
    orderPay(item.id, () => {
        orderInfoRefresh()
    })
}

// 商家确认发货
const confirmDeliveryHandler = (item) => {
    confirmDeliveryPopupRef.value.open(item.id)
}


// 确认收货
const confirmReceivingHandler = (item) => {
    confirmReceiving(item.id, () => {
        orderInfoRefresh()
    })
}

// 去评论
const toCommentHandler = (item) => {
    uni.$on('commentSuccess', () => {
        orderInfoRefresh()
    })
    qly.page.open('/pages/my/order/comment', {id: item.id})
}

// 申请售后
const toRefund = (item) => {
    uni.$on('refreshDetail', () => {
        orderInfoRefresh()
    })
    qly.page.open('/pages/my/order/refund', {id: item.id})
}

qly.page.onLoad(() => {
    params.value = qly.page.params
})
</script>
<style scoped lang="scss">

.btn-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 24rpx;
    background-color: #fff;
    padding: 24rpx;
    box-sizing: border-box;
    border-top: 2rpx solid #eee;
}
</style>
